<template > 
    <div class="box"> 
        <div class="content">
            <div class="w1200">
                <!-- 导航 -->
                <p class="newsNav">
                    <!-- <a target="_blank">{{ newsdetailsData.config?newsdetailsData.config.name:'' }}</a><span>&gt;</span><span>&gt;</span> -->
                    {{ newsdetailsData.title }}
                </p>
                <div class="newsCon" v-if="newsdetailsData.content">
                    <div class="details" v-html="newsdetailsData.content">

                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>
<script>
import pagePublic from "@/mixins/pagePublic.js";
import { mapMutations, mapState } from "vuex";
    export default {
        name: "tem",
        mixins: [pagePublic],
        data(){
            return{
                newsdetailsData:{},
                // urls:{
                //     list: {
                //         url:this.$api.tem.list,
                //         method:"get",
                //         sync:false,
                //     },
                //     add:this.$api.tem.add,
                //     edit:this.$api.tem.edit,
                //     del:this.$api.tem.del
                // },

                
            }
        },
        computed: {
            ...mapState(['configInfo']),
        },
        created() {
            this.getData()
            
        },
        methods:{
            ...mapMutations(['set_configInfo']),
            getData(){
                this.$api.newsDetails({news_id:this.$route.query.id}).then(res=>{
                    this.newsdetailsData = res.data || {}
                    console.log(this.newsdetailsData)
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
.box{
    width:100%;
    // height:100vh;
    background-color: #fafafa;
    margin-bottom: 30px;
}
/* 导航 */
.box .newsNav{padding: 30px 0; font-size: 17px;}
.box .newsNav a{color: #333; display: inline-block;}
.box .newsNav a:hover{color: var(--bg-color,'#FF6900');}
.box .newsNav a.current{color: var(--bg-color,'#FF6900');}
.box .newsNav span{padding: 0 5px;}
.box .newsCon{flex: 1; overflow-y: auto; margin: 0 auto; width:1200px; background: #fff; border-radius: 8px; padding:20px 40px; box-shadow: 0 0 10px #e6e6e6;}

/*详情页面*/
.newsCon .details h5{font-size: 24px; text-align: center; padding:30px 0;}
.newsCon .details h6{font-size: 16px; font-weight: normal; text-align: center; color: #666; padding-bottom: 30px; border-bottom:1px solid #ccc; }
.newsCon .details p{font-size: 16px; color: #333; text-indent: 2em;}
.newsCon .details img{max-width: 96%;}
.newsCon .updown{padding:26px 0;}
.newsCon .updown a{display: block; font-size: 16px; padding:10px 0;}
.newsCon .updown a:hover{color: var(--bg-color,'#FF6900');}
.newsCon .likes p{background: var(--bg-color,'#FF6900'); line-height:50px; height:50px; font-size: 22px; color: #fff; border-radius: 4px; margin-bottom: 10px; text-indent: 1em;}
.newsCon .likes ul li{width:46%; float: left; padding:10px 2%;}
.newsCon .likes ul li a{font-size: 14px;}
.newsCon .likes ul li a span{ position: relative; top: -2px; margin-right: 12px; }
.newsCon .likes ul li a:hover{color: var(--bg-color,'#FF6900');}
</style>